<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>订单评价</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			#commmentSubmit{
				padding-bottom:10px ;
			}
			.score-box{
				margin: 10px 0;
				height:30px;
			}
			.score-box h4{
				font-size: 14px;
				line-height: 30px;
				float: left;
				margin-right: 10px;
			}
			
			
			.comment-btn button{
				
				background-color: #ff4342;
				font-size: 15px;
				width: 100%;
				height: 46px;
				text-align: center;
				border-radius: 0;
			}
			
			.shop-score{
				background-color: #fff;
				border-top:1px solid #dedede ;
				border-bottom:1px solid #dedede ;
				margin-top: 10px;
				padding: 5px 10px;
			}
			.shop-score h3{
				font-size: 14px;
			}
			
			.shop-score-list{
				height: 30px;
				margin:5px 0 ;
			}
			.shop-score span{
				display: block;
				float: left;
				font-size: 14px;
				line-height: 30px;
				float: left;
				margin-right: 10px;
			}
			/*评分*/
			.star-score{
				height: 30px;
				float:left ;
			}
			.star-score li{
				float:left ;
				font-size: 30px;
				line-height: 30px;
				color: #dedede;
			}
			.star-score li.active{
				color: #FFD700;
			}
			/*1分*/
			.star-score.score_1 li:nth-child(1){
				color: #FFD700;
			}
			/*2分*/
			.star-score.score_2 li:nth-child(1),
			.star-score.score_2 li:nth-child(2)
			{
				color: #FFD700;
			}
			/*3分*/
			.star-score.score_3 li:nth-child(1),
			.star-score.score_3 li:nth-child(2),
			.star-score.score_3 li:nth-child(3)
			{
				color: #FFD700;
			}
			/*4分*/
			.star-score.score_4 li:nth-child(1),
			.star-score.score_4 li:nth-child(2),
			.star-score.score_4 li:nth-child(3),
			.star-score.score_4 li:nth-child(4)
			{
				color: #FFD700;
			}
			/*5分*/
			.star-score.score_5 li
			{
				color: #FFD700;
			}
		</style>
	</head>
	<body>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">订单评价</h1>
			</header>
			<div id="scrollDiv" class="scroll-div">
				<div class="mui-content transparent">
					<div id="commmentSubmit" style="margin: 10px 0;">
						
					</div>
					 <div  class="action-bar mui-flex comment-btn" style="margin: 10px 15px;">
			            <button class="mui-btn mui-btn-negative" id="comment-submit" >提交</button>
			        </div>
				</div>
			</div>
			
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			mui.init({
				swipeBack: true,
				beforeback:function(){
					mui.fire(plus.webview.getWebviewById('order-list.html'),'updateData');
				},
			});
			mui.plusReady(function() {
				orderId=plus.webview.currentWebview().orderId;
				var w=plus.nativeUI.showWaiting('',{padlock:true});

				loadPage=function(orderId){
//					console.log(URL+'api/MemberOrder/GetOrderDetail GetOrderEvaluatio/'+orderId)
						mui.ajax(URL+'api/MemberOrder/GetOrderEvaluatio/'+orderId,{
							dataType:'json',
							type:'get',
							timeout:10000,
							success:function(data){
								
								console.log(JSON.stringify(data))
								if(data.Success=='true'){
									var html='';
									if(data.Order.HasExpressStatus){
											html+='<div class="order-info" id="logistics">'+
												'<div class="item">'+
													'<div class="item-text express-box" id="expressStatus">'+
														'<div class="express-loading">'+
															'<div class="mui-pull-loading mui-spinner custom-loading"></div>'+
														'</div>'+
													'</div>'+
												'</div>'+
											'</div>';
						            	}
						            html+='<div class="order-info">'+
										'<div class="item">'+
											'<div class="order-shop">'+
											'<a class="vshop-url" data-id="'+data.Order.VShopId+'">'+data.Order.ShopName+'</a>'+
											'<span class="mui-pull-right">'+data.Order.Status+'</span></div>'+
										'</div>';
						            	for(var j=0;j<data.OrderItem.length;j++){
							                html+='<div class="item">'+
							                    '<div class="buy-goods">'+
							                        '<a class="goods-url" data-id="'+data.OrderItem[j].ProductId+'"><img src="'+data.OrderItem[j].ProductImage+'"/></a>'+
							                        '<p><em>¥ '+data.OrderItem[j].Price+'</em><span><a class="goods-url" data-id="'+data.OrderItem[j].ProductId+'">'+data.OrderItem[j].ProductName+'</a></span></p>'+
							                        '<h5><span>x '+data.OrderItem[j].Count+'</span>';
							                        	if(data.OrderItem[j].size!='')
															html += '尺寸：'+data.OrderItem[j].size+'&nbsp;&nbsp;';
														if(data.OrderItem[j].color!='')
															html += '颜色：'+data.OrderItem[j].color+'&nbsp;&nbsp;';
														if(data.OrderItem[j].version!='')
															html += '规格：'+data.OrderItem[j].version;
							                            html+='</h5>'+
							                    '</div>'+
							                    '<div class="comment-content  product-score" data-pid="'+data.Model[j].Id+'">'+
							                        '<div class="score-box">'+
							                            '<h4>评分:</h4>'+
							                            '<ul class="star-score clearfix" data-score="-1">'+
															'<li class="iconfont icon-xingxing" data-idx="1"></li>'+
															'<li class="iconfont icon-xingxing" data-idx="2"></li>'+
															'<li class="iconfont icon-xingxing" data-idx="3"></li>'+
															'<li class="iconfont icon-xingxing" data-idx="4"></li>'+
															'<li class="iconfont icon-xingxing" data-idx="5"></li>'+
							                            '</ul>'+
							                        '</div>'+
							                        '<textarea class="form-control" placeholder="请输入评价内容" name="content"></textarea>'+
							                    '</div>'+
							                '</div>';
							              
						               	}
							            html+='<div class="item">'+
							            	'<div class="item-text">'+
						                    '&nbsp;<span class="mui-pull-left order-total">共'+data.OrderItem.length+'件商品 &nbsp;&nbsp; 总金额：<em>¥ '+data.Order.RealTotalAmount+'</em></span>'+
							            	'</div>'+
							            '</div>'+
							            '<div class="item">'+
							            	'<div class="item-text">'+
						                    '订单号：'+data.Order.Id+' '+
							            	'</div>'+
							            '</div>'+
							            '<div class="item">'+
							            	'<div class="item-text">'+
						                    '创建时间：'+data.Order.OrderDate+' '+
							            	'</div>'+
							            '</div>';
							            html+='</div>';
									html+='<div class="shop-score">'+

												'<div class="shop-score-list">'+
													'<span>商品包装</span>'+
													'<ul id="shop-pack" class="star-score clearfix" data-score="-1">'+
														'<li class="iconfont icon-xingxing" data-idx="1"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="2"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="3"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="4"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="5"></li>'+
						                            '</ul>'+
												'</div>'+
												'<div class="shop-score-list">'+
													'<span>送货速度</span>'+
													'<ul id="shop-goods" class="star-score clearfix" data-score="-1">'+
														'<li class="iconfont icon-xingxing" data-idx="1"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="2"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="3"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="4"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="5"></li>'+
						                            '</ul>'+
												'</div>'+
												'<div class="shop-score-list">'+
													'<span>配送服务</span>'+
													'<ul id="shop-delivery" class="star-score clearfix" data-score="-1">'+
														'<li class="iconfont icon-xingxing" data-idx="1"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="2"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="3"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="4"></li>'+
														'<li class="iconfont icon-xingxing" data-idx="5"></li>'+
						                            '</ul>'+
												'</div>'+
											'</div>';
											
//							        console.log(html)
						            document.getElementById('commmentSubmit').innerHTML=html;
						            
						            if(data.Order.HasExpressStatus){
//							            	console.log(URL+'api/MemberOrder/GetExpressInfo?orderId='+orderId)
						            		mui.ajax(URL+'api/MemberOrder/GetExpressInfo?orderId='+orderId,{
												dataType:'json',
												type:'get',
												timeout:10000,
												success:function(dataE){
//													console.log(dataE)
													
													if(dataE.Success=='true'){
														var express='';
														if(dataE.Comment.Success){
															for(var k=0; k<dataE.Comment.Data.length; k++){
																express+='<p>'+dataE.Comment.Data[k].time+'<span>'+dataE.Comment.Data[k].content +'</span></p>';
															}
														}else{
															express+='<p class="red">'+dataE.Comment.Msg+'</p>';
														}
														express+='运单号码：'+dataE.ExpressNum+' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 物流公司： '+dataE.ExpressCompanyName;
														
														document.getElementById('expressStatus').innerHTML=express;
													}
												},
												error:function(d){

													var $logistics = document.getElementById("logistics")
													document.getElementById('commmentSubmit').removeChild($logistics)
													
												}
											});
						            	}
									w.close();
									document.getElementsByClassName("mui-content")[0].className="mui-content";
								}
							},
							error:function(xhr,type,errorThrown){
								console.log(JSON.stringify(xhr))
								w.close();
								plus.nativeUI.toast('请求失败，请检查网络')
								reloadWvLoad();
							}
						});
	
				}
			
				loadPage(orderId)
			})
								
			mui("#commmentSubmit").on('tap','.star-score li',function(){
				var _idx= this.getAttribute("data-idx"),
				saveClassNam = this.parentNode.className;
				
				if(/score_\d{1}/g.test(saveClassNam)){
					saveClassNam=saveClassNam.replace(/score_\d{1}/g ,"");
				}
				this.parentNode.setAttribute("data-score",_idx)
				this.parentNode.className = saveClassNam +" score_"+_idx;
			})
			//提交
			document.getElementById('comment-submit').addEventListener('tap',function(){
					var $productScore =mui(".product-score");
					var _productScore=[],_productScoreStr="";
//						console.log("商品包装"+document.getElementById("shop-pack").getAttribute("data-score"))
//						console.log("送货速度"+document.getElementById("shop-goods").getAttribute("data-score"))
//						console.log("配送服务"+document.getElementById("shop-delivery").getAttribute("data-score"))
						var _PackMark =document.getElementById("shop-pack").getAttribute("data-score");
						var _DeliveryMark =document.getElementById("shop-goods").getAttribute("data-score");
						var _ServiveMark =document.getElementById("shop-delivery").getAttribute("data-score");
					
						for(var iproct=0;  iproct<$productScore.length; iproct++){
//							console.log($productScore[iproct].getAttribute("data-pid"))
//							console.log($productScore[iproct].childNodes[0].childNodes[1].getAttribute("data-score"))
//							console.log($productScore[iproct].childNodes[1].value)
							if($productScore[iproct].childNodes[0].childNodes[1].getAttribute("data-score") == -1){
								plus.nativeUI.alert("请给商品评分");
								return
							}

							var obj={
								"subOrderId":$productScore[iproct].getAttribute("data-pid"),
								"star":$productScore[iproct].childNodes[0].childNodes[1].getAttribute("data-score"),
								"content":$productScore[iproct].childNodes[1].value
							}
							_productScore[iproct]=obj
						}
						
						if(_PackMark == -1){
							plus.nativeUI.alert("请给商品包装评分");
							return
						}
						if(_DeliveryMark == -1){
							plus.nativeUI.alert("请给送货速度评分");
							return
						}
						if(_ServiveMark == -1){
							plus.nativeUI.alert("请给配送服务评分");
							return
						}
						

						_productScoreStr=JSON.stringify(_productScore);
					var commentStr= URL+'Api/MemberOrder/GetAddOrderEvaluationAndComment?PackMark='+_PackMark+'&DeliveryMark='+_DeliveryMark+'&ServiceMark='+_ServiveMark+'&OrderId='+orderId+'&productCommentsJSON='+_productScoreStr;
//						console.log(commentStr)
				
					mui.ajax(commentStr,{
						dataType:'json',
						type:'get',
						timeout:10000,
						success:function(data){

//							console.log(JSON.stringify(data))
							if(data.success){
								plus.nativeUI.alert("评论成功",function(){
									mui.back()
								})
								
							}

						},
						error:function(xhr,type,errorThrown){
//							console.log(JSON.stringify(xhr))
							plus.nativeUI.alert("网络请求失败，或者您已经提交过订单")
						}
					});
			})
		</script>
	</body>
</html>
